<template>
  <div class="container">
    <div class="box-container">
      <!-- 左侧盒子 -->
      <el-card class="box left-box">
        <div slot="header" class="header">
          <span>左侧文件列表</span>
          <span class="count">{{ leftBoxIds.length }} 个文件</span>
        </div>
        <el-table :data="getFilesByIds(leftBoxIds)" style="width: 100%">
          <el-table-column prop="f0902" label="文件名"></el-table-column>
          <el-table-column prop="f0905" label="上传时间"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="moveToRight(scope.row.f0901)">
                移动到右侧
              </el-button>
            </template>
          </el-table-column>
          <el-table-column width="50">
            <template slot-scope="scope">
              <div class="drag-handle" draggable="true" @dragstart="handleDragStart($event, scope.row.f0901)">
                <i class="el-icon-rank"></i>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 右侧盒子 -->
      <el-card class="box right-box" @dragover.native.prevent @drop.native.prevent="handleDrop">
        <div slot="header" class="header">
          <span>右侧文件列表</span>
          <span class="count">{{ rightBoxIds.length }} 个文件</span>
        </div>
        <el-table :data="getFilesByIds(rightBoxIds)" style="width: 100%">
          <el-table-column prop="f0902" label="文件名"></el-table-column>
          <el-table-column prop="f0905" label="上传时间"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="moveToLeft(scope.row.f0901)">
                移回左侧
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="footerButton">
      <el-button type="primary" @click="submit">确认变更文件</el-button>
    </div>
  </div>
</template>

<script>
import tab from '@/plugins/tab';
import { listT09, getT09History, updateT09History } from "@/api/knowledge_manage/T09";
export default {
  name: 'knowledgeVersion',
  mixins: [tab],
  data() {
    return {
      // 左侧盒子的文件ID数组
      leftBoxIds: [],
      // 右侧盒子的文件ID数组
      rightBoxIds: [],
      // 所有文件数据
      allFiles: [
        // { id: 1, name: '文档1.docx', size: '1.2MB' },
      ],
      // 当前拖拽的文件ID
      draggedFileId: null,
      // 详情数据
      detailData: {},
      version: '',
    };
  },
  async created() {
    await listT09().then(res => {
      this.allFiles = res.rows;
    })
    this.leftBoxIds = this.allFiles.map(file => file.f0901);
    if (this.$route.params.id !== '0') {
      await getT09History(this.$route.params.id).then(res => {
        this.detailData = res.data;
        if(res.data.f2101){
          this.version = res.data.f2101;
        }
        if (typeof res.data.f2106 === 'string') {
          this.rightBoxIds = JSON.parse(res.data.f2106);
        } else {
          this.rightBoxIds = res.data.f2106;
        }
      })
    }
  },
  methods: {
    // 根据ID数组获取文件数据
    getFilesByIds(ids) {
      return this.allFiles.filter(file => ids.includes(file.f0901));
    },

    // 将文件从左侧移动到右侧
    moveToRight(fileId) {
      if (this.rightBoxIds.includes(fileId)) {
        this.rightBoxIds.splice(this.rightBoxIds.indexOf(fileId), 1);
      }
      // 从左侧移除
      const index = this.leftBoxIds.indexOf(fileId);
      if (index > -1) {
        this.leftBoxIds.splice(index, 1);
        // 添加到右侧
        this.rightBoxIds.push(fileId);
        this.$message.success('文件已移动到右侧');
      }
    },

    // 将文件从右侧移动到左侧
    moveToLeft(fileId) {
      // 从右侧移除
      const index = this.rightBoxIds.indexOf(fileId);
      if (index > -1) {
        this.rightBoxIds.splice(index, 1);
        // 添加到左侧
        this.leftBoxIds.push(fileId);
        this.$message.success('文件已移回左侧');
      }
    },

    // 开始拖拽
    handleDragStart(event, fileId) {
      this.draggedFileId = fileId;
      // 设置拖拽效果
      event.dataTransfer.effectAllowed = 'move';
      // 设置拖拽数据
      event.dataTransfer.setData('text/plain', fileId);

      // 添加拖拽样式
      event.target.classList.add('dragging');
    },

    // 放置拖拽项
    handleDrop(event) {
      if (this.draggedFileId) {
        this.moveToRight(this.draggedFileId);
        this.draggedFileId = null;
      }
    },

    // 确认变更文件
    submit() {
      const t09List = this.allFiles.filter(file => this.rightBoxIds.includes(file.f0901))
      this.detailData.t09List = t09List
      this.detailData.version = this.version
      this.$confirm('确认提交文件变更？').then(() => {
        // 执行提交操作
        updateT09History(this.detailData).then(() => {
          this.$message.success('文件变更已提交');
          this.$router.push(`/Knowledge`)
          this.$tab.refreshOpenPage({
            name: '知识库管理',
          })
          this.$tab.closeOpenPage(); // 关闭当前页面
        })
      })
    }
  }
};
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.box-container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.box {
  flex: 1;
  min-height: 400px;
  max-height: 550px;
  overflow-y: auto;
}

.left-box {
  border-left: 3px solid #409EFF;
}

.right-box {
  border-left: 3px solid #67C23A;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.count {
  font-size: 12px;
  color: #909399;
}

.drag-handle {
  cursor: move;
  color: #409EFF;
}

.drag-handle:hover {
  color: #66b1ff;
}

.dragging {
  opacity: 0.5;
}

/* 拖拽目标样式 */
.right-box.drag-over {
  background-color: #f0f9eb;
  border: 2px dashed #67C23A;
}

.footerButton {
  margin-top: 20px;
  text-align: center;
}
</style>
